<template>
  <div class="guide">
      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(l,i) in imgs" :key="i">
              <img :src="l" class="g-img" alt="">
          </van-swipe-item>
      </van-swipe> -->
      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(l,i) in banners" :key="i">
              <img :src="l.pic" class="g-img" alt="">
          </van-swipe-item>
      </van-swipe> -->
      
      <!-- <p class="countdown" @click="gotoPage('main')">
        跳过广告 {{count}} S
      </p> -->
     

      <my-swipe class="my-swipe" id="bannerone" :options="options" >
          <my-swipe-item v-for="(l,i) in banners" :key="i">
              <img :src="l.pic" alt="" class="g-img">
          </my-swipe-item>
          <!-- <div class="swiper-slide" v-for="(l,i) in banners" :key="i">
            <img :src="l.pic" alt="" class="g-img">
          </div> -->
      </my-swipe>
       <p class="countdown" @click="gotoPage('main')">
        跳过广告 <van-count-down :time="time * 1000" format='ss'  @finish="timeFinish"/>  S
      </p>
  </div>
</template>


<script>
import axios from "axios"
import img4 from "@/assets/images/img4.jpg"
import { getYearWeek } from '../../utils';
export default {
    data(){
      return {
         imgs:[
            require("@/assets/images/img1.jpg"),
            require("@/assets/images/img2.jpg"),
            require("@/assets/images/img3.jpg"),
            require("@/assets/images/img4.jpg"),
         ],
         count:5,
         timer:null,
         time:5,
         banners:[],
         options:{   // 轮播里面参数 
           autoplay:true,
           observer:true,  // 监听轮播数据改变 
           speed:2000,
           loop:true,
           effect : 'cube',
           cubeEffect: {
              slideShadows: true,
              shadow: true,
              shadowOffset: 100,
              shadowScale: 0.6
            },
            timeend: 1000 * 60  * 60  * 24   * 7  
         }
      }
    },
    methods:{
      timeFinish(){
          this.gotoPage("main")
      }
    },
    created(){
      // 控制一个星期 
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1;
      var day =  date.getDate(); 
      var week = getYearWeek(year,month,day)
      console.log(week)
      // week=31;
      // var week = date.getDay()
      // var day =  date.getDate(); 
      // var getweek = Math.ceil((day + 6 - week) / 7)
      // console.log(getweek)
      
      // if(week==0){
      //     localStorage.removeItem("visitcount")  // 清空visitcount 
      // }

      if(localStorage.visitcount){
        localStorage.visitcount++;
        localStorage.oldweek = localStorage.newweek 
        localStorage.newweek  = week;
        if(localStorage.oldweek!=localStorage.newweek){
           localStorage.removeItem("visitcount") 
        }else{
          if(localStorage.visitcount>3){
            this.gotoPage("main")
          }
        }
      }else{
        console.log("first open")
        localStorage.visitcount = 1;
        localStorage.newweek = week;
      }
    },
    mounted(){

      // 网易云接口 
      axios.get("/wangyi/banner?type=2&limit=5")
      .then(res=>{
        //   // 在下次 DOM 更新循环结束之后执行延迟回调
      //   // 延迟执行 
        this.$nextTick(()=>{
          this.banners = res.data.banners.slice(0,4) 
        })
      })
      // axios.get("http://47.104.209.44:3333/banner?type=2&limit=5")
      // .then(res=>{
      //   console.log(res)
      //   // 在下次 DOM 更新循环结束之后执行延迟回调
      //   // 延迟执行 
      //   this.$nextTick(()=>{
      //     this.banners = res.data.banners.slice(0,4) 
      //   })

      //   // setTimeout(()=>{},1000)
      // })


      // this.timer = setInterval(()=>{
      //   if(this.count>0){
      //     this.count--;
      //   }else{
      //     clearInterval(this.timer)
      //     this.timer = null
      //     this.count = 5; 
      //     this.gotoPage("main")
      //   }
      // },1000)
    },
    destroyed(){
      // clearInterval(this.timer)
      // this.timer = null
    }
}
</script>


<style lang="scss" scoped>
.guide{
    position: relative;
    .my-swipe{
      width:100%;
      height:100%;
      .g-img{
        width:100%;
        height:100%;
      }
    }
    .countdown{
      position: absolute;
      top:10px;
      right:10px;
      width:90px;
      height:24px;
      color:#fff;
      background: rgba(0,0,0,0.5);
      border-radius: 30px;
      border:1px solid rgba(0,0,0,.9);
      text-align: center;
      line-height: 24px;
      font-size:12px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index:100;
      ::v-deep .van-count-down{
        color:#f50;
      }
    }
}
</style>

